<script setup lang="ts" name="MenuAddEdit">
import { transformI18n } from '@/plugins/i18n'
import useDictionaryEntry from '@/hooks/useDictionaryEntry'
import { storeToRefs } from 'pinia'
import { useSystemConfigStore } from '@/store/storage/systemConfigStore'
const { getDictionaryEntryData } = useDictionaryEntry()

const systemConfigStore = useSystemConfigStore()
const { language } = storeToRefs(systemConfigStore)
const statusList = ref([])
const props = defineProps({
  catalogList: { type: Array as any }
})
const catalogData = toRef(props, 'catalogList')
const dialogVisible = ref(false)
const dialogTitle = ref('')
const formData = ref({
  title: '',
  pid: '',
  icon: '',
  transitionName: '',
  badge: '',
  status: true,
  isCatalog: false,
  showLink: true,
  keepAlive: true,
  isFixed: false,
  dot: false,
  route: '',
  path: '',
  url: '',
  redirect: '',
  sort: 0,
  remark: ''
})
// 显示新建/编辑部门弹窗
const showDialog = (v) => {
  dialogVisible.value = true
  if (v) {
    dialogTitle.value = 'buttons.buttonEdit'
    formData.value.title = v.title
    formData.value.pid = v.pid === 0 ? '' : v.pid
    formData.value.icon = v.icon
    formData.value.transitionName = v.transitionName
    formData.value.badge = v.badge
    formData.value.status = v.status
    formData.value.isCatalog = v.isCatalog
    formData.value.showLink = v.showLink
    formData.value.keepAlive = v.keepAlive
    formData.value.isFixed = v.isFixed
    formData.value.dot = v.dot
    formData.value.route = v.route
    formData.value.path = v.path
    formData.value.url = v.url
    formData.value.redirect = v.redirect
    formData.value.sort = v.sort
    formData.value.remark = v.remark
  } else {
    dialogTitle.value = 'buttons.buttonCreate'
    formData.value.title = ''
    formData.value.pid = ''
    formData.value.icon = ''
    formData.value.transitionName = ''
    formData.value.badge = ''
    formData.value.status = true
    formData.value.isCatalog = false
    formData.value.showLink = true
    formData.value.keepAlive = true
    formData.value.isFixed = false
    formData.value.dot = false
    formData.value.route = ''
    formData.value.path = ''
    formData.value.url = ''
    formData.value.redirect = ''
    formData.value.sort = 0
    formData.value.remark = ''
  }
}
// 子组件将方法暴露给父组件
defineExpose({ showDialog })
const handleCloseDialog = () => {
  dialogVisible.value = false
}

const handleOk = () => {
  console.log(formData.value)
}
const getStatusList = async () => {
  statusList.value = await getDictionaryEntryData({
    label: '',
    status: 2,
    type: 'enable_boolean'
  })
}
getStatusList()

const whetherBooleanList = ref([])
const getWhetherBooleanList = async () => {
  whetherBooleanList.value = await getDictionaryEntryData({
    label: '',
    status: 2,
    type: 'whether_boolean'
  })
}
getWhetherBooleanList()

const cutsceneTypeList = ref([])
const getCutsceneTypeList = async () => {
  cutsceneTypeList.value = await getDictionaryEntryData({
    label: '',
    status: 2,
    type: 'cutsceneType'
  })
}
getCutsceneTypeList()

const setDataLanguageChange = (data) => {
  data.forEach((item) => {
    item.label = transformI18n('menus.' + item.title, true)
    if (item.children && item.children.length > 0) {
      setDataLanguageChange(item.children)
    }
  })
}

watch(
  () => props.catalogList,
  (v) => {
    catalogData.value = v
    setDataLanguageChange(catalogData.value)
  },
  {
    immediate: true,
    deep: true
  }
)

watch(
  () => language.value,
  () => {
    setDataLanguageChange(catalogData.value)
  }
)
</script>

<template>
  <el-dialog v-model="dialogVisible" width="1080px" append-to-body :title="transformI18n(dialogTitle, true) + transformI18n('page.菜单', true)">
    <el-form label-width="auto" label-position="right">
      <div class="el-form-group">
        <el-form-item :label="$t('page.父级菜单')">
          <el-tree-select v-model="formData.pid" :data="catalogData" :render-after-expand="false" check-strictly :placeholder="$t('placeholders.请选择') + $t('page.父级菜单')" />
        </el-form-item>
        <el-form-item :label="$t('page.菜单名称')">
          <el-input v-model="formData.title" :placeholder="$t('placeholders.请输入') + $t('page.菜单名称')" />
        </el-form-item>
        <el-form-item :label="$t('page.菜单标识')">
          <el-input v-model="formData.route" :placeholder="$t('placeholders.请输入') + $t('page.菜单标识')" />
        </el-form-item>
      </div>
      <div class="el-form-group mt-6px">
        <el-form-item :label="$t('page.图标')">
          <IconSelect v-model:icon="formData.icon"></IconSelect>
        </el-form-item>
        <el-form-item :label="$t('page.过场动画')">
          <el-select v-model="formData.transitionName" :placeholder="$t('placeholders.请选择') + $t('page.过场动画')">
            <el-option v-for="item in cutsceneTypeList" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('page.徽章')">
          <el-input v-model="formData.badge" :placeholder="$t('placeholders.请输入') + $t('page.徽章')" />
        </el-form-item>
      </div>
      <div class="el-form-group mt-6px">
        <el-form-item :label="$t('page.组件路径')">
          <el-input v-model="formData.path" :placeholder="$t('placeholders.请输入') + $t('page.组件路径')" />
        </el-form-item>
        <el-form-item :label="$t('page.菜单链接')">
          <el-input v-model="formData.url" :placeholder="$t('placeholders.请输入') + $t('page.菜单链接')" />
        </el-form-item>
        <el-form-item :label="$t('page.重定向')">
          <el-input v-model="formData.redirect" :placeholder="$t('placeholders.请输入') + $t('page.重定向') + $t('page.链接')" />
        </el-form-item>
      </div>
      <div class="el-form-group mt-6px">
        <el-form-item :label="$t('page.排序')">
          <el-input-number v-model="formData.sort" />
        </el-form-item>
      </div>
      <div class="el-form-group mt-6px">
        <el-form-item :label="$t('page.状态')">
          <el-radio-group class="radio-button" v-model="formData.status">
            <el-radio v-for="(item, index) in statusList" :key="index" :label="item.value" border>
              {{ $t('page.' +
              item.label) }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="$t('page.侧边可见')">
          <el-radio-group class="radio-button" v-model="formData.showLink">
            <el-radio v-for="(item, index) in whetherBooleanList" :key="index" :label="item.value" border>
              {{ $t('page.' +
              item.label) }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="$t('page.是否缓存')">
          <el-radio-group class="radio-button" v-model="formData.keepAlive">
            <el-radio v-for="(item, index) in whetherBooleanList" :key="index" :label="item.value" border>
              {{ $t('page.' +
              item.label) }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </div>
      <div class="el-form-group mt-6px mb-6px">
        <el-form-item :label="$t('page.是否目录')">
          <el-radio-group class="radio-button" v-model="formData.isCatalog">
            <el-radio v-for="(item, index) in whetherBooleanList" :key="index" :label="item.value" border>
              {{ $t('page.' +
              item.label) }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="$t('page.是否固定')">
          <el-radio-group class="radio-button" v-model="formData.isFixed">
            <el-radio v-for="(item, index) in whetherBooleanList" :key="index" :label="item.value" border>
              {{ $t('page.' +
              item.label) }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="$t('page.是否热点')">
          <el-radio-group class="radio-button" v-model="formData.dot">
            <el-radio v-for="(item, index) in whetherBooleanList" :key="index" :label="item.value" border>
              {{ $t('page.' +
              item.label) }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </div>
      <el-form-item :label="$t('page.备注')">
        <el-input type="textarea" v-model="formData.remark" :placeholder="$t('placeholders.请输入') + $t('page.备注')" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="modal-footer" ref="modalFooter">
        <el-button @click="handleCloseDialog">{{ $t('buttons.buttonCancel') }}</el-button>
        <el-button type="primary" @click="handleOk">{{ $t('buttons.buttonConfirm') }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
.el-form {
  :deep(.el-form-item__content) {
    .el-radio-group {
      margin: 0;
    }

    .icon-select {
      flex: 1;
      margin: 6px;
    }
  }

  :deep(.el-form-item__label) {
    margin: 6px;
  }

  .el-form-group {
    display: flex;
    flex: 1;

    .el-form-item {
      flex: 1;
      margin: 0;
    }

    .el-form-item+.el-form-item {
      margin: 0;
    }
  }
}

.modal-footer {
  display: inline-flex;
  overflow: hidden;
}
</style>
